<template>
  <div class="no-company-section" name="NoCompanySection">
    <el-card class="no-company-card" name="NoCompanyCard" :shadow="shadow">
      <div class="no-company-content" name="NoCompanyContent">
        <el-empty 
          name="NoCompanyEmpty"
          :description="title" 
          :image-size="imageSize"
        >
          <template #image>
            <el-icon class="no-company-icon" :size="imageSize" name="NoCompanyIcon">
              <component :is="icon" />
            </el-icon>
          </template>
          <template #description>
            <div class="no-company-desc" name="NoCompanyDesc">
              <p class="desc-title">{{ title }}</p>
              <p class="desc-text">{{ description || '您当前暂未关联任何物业公司，无法进行相关操作' }}</p>
              <p v-if="showContactTip" class="desc-text">请联系系统管理员为您分配物业公司权限</p>
            </div>
          </template>
          <div v-if="showActions" class="no-company-actions">
            <el-button 
              v-if="showRefreshButton" 
              type="primary" 
              @click="handleRefresh" 
              name="RefreshButton"
            >
              <el-icon><Refresh /></el-icon>
              {{ refreshButtonText }}
            </el-button>
            <el-button 
              v-if="showContactButton" 
              type="success" 
              @click="handleContact" 
              name="ContactButton"
            >
              <el-icon><Message /></el-icon>
              {{ contactButtonText }}
            </el-button>
          </div>
        </el-empty>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { House, Refresh, Message } from '@element-plus/icons-vue'

// 定义props
interface Props {
  title?: string
  description?: string
  icon?: string
  imageSize?: number
  shadow?: string
  showContactTip?: boolean
  showActions?: boolean
  showRefreshButton?: boolean
  showContactButton?: boolean
  refreshButtonText?: string
  contactButtonText?: string
}

const props = withDefaults(defineProps<Props>(), {
  title: '暂未关联物业公司',
  description: '您当前暂未关联任何物业公司，无法进行相关操作',
  icon: 'House',
  imageSize: 120,
  shadow: 'never',
  showContactTip: true,
  showActions: true,
  showRefreshButton: true,
  showContactButton: false,
  refreshButtonText: '刷新页面',
  contactButtonText: '联系管理员'
})

// 定义emits
const emit = defineEmits<{
  refresh: []
  contact: []
}>()

// 处理刷新
const handleRefresh = () => {
  emit('refresh')
}

// 处理联系管理员
const handleContact = () => {
  emit('contact')
}
</script>

<style lang="scss" scoped>
.no-company-section {
  margin-bottom: 20px;
}

.no-company-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 2, 12, 0.1);
}

.no-company-content {
  padding: 40px 20px;
  text-align: center;
}

.no-company-icon {
  color: #c0c4cc;
  margin-bottom: 20px;
}

.no-company-desc {
  margin: 20px 0;
}

.desc-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 12px 0;
}

.desc-text {
  font-size: 14px;
  color: #909399;
  margin: 0 0 8px 0;
  line-height: 1.6;
}

.no-company-actions {
  margin-top: 20px;
  
  .el-button {
    margin: 0 8px;
    min-width: 100px;
  }
}
</style>
